<template>
	<view class="container">
		<view class="list-header">
			<!-- 搜索框 -->
			<view class="index-search-box dis-flex">
				<view class="index-search flex-box" @tap="triggerSearch">
					<view class="index-cont-search">
						<!-- <icon class="text-center" size="15" type="search"></icon> -->
						<text class="iconfont icon-sousuo f-30"></text>
						<text>{{ option.search ? option.search  : '搜索商品' }}</text>
					</view>
				</view>
				<view @tap="onChangeShowState" class="list-right f-28">
					<text class="iconfont icon-tubiao_kuaizhuangpailie" v-if="showView"></text>
					<text class="iconfont icon-tubiao_liebiaopailie" v-else></text>
				</view>
			</view>

			<!-- 筛选标签 -->
			<view class="store_nav_cont dis-flex b-f b-b">
				<view @tap="switchSortType" data-type="all" class="flex-box t-c p-r" data-index="0" :id="['list-'+ all]">
					<text>综合</text>
				</view>
				<view @tap="switchSortType" data-type="sales" class="flex-box t-c p-r" data-index="1" :id="['list-'+ sales]">
					<text> 销量</text>
				</view>
				<view @tap="switchSortType" data-type="price" class="dis-flex flex-x-center flex-box t-c p-r" data-index="2" :id="['list-'+ price]">
					<text class="price__text">价格</text>
					<view class="price__arrow dis-flex flex-dir-column flex-x-center flex-y-center">
						<text class="iconfont icon-arrow-top" :class="[sortPrice?'':'active']"></text>
						<text class="iconfont icon-arrow-bottom" :class="[sortPrice?'active':'']"></text>
					</view>
				</view>
			</view>

			<!-- 商品列表 -->
			<scroll-view @scrolltolower="bindDownLoad" scroll-y style="width:750upx;" v-if="list.data !== undefined && list.data.length >0 "
			 :style="[{'height': height }]">
				<view class="new">
					<view class="category-list" :class="[showView ? 'arrange' : '']">
						<navigator class="list b-f" hover-class="none" :url="'../goods/index?goods_id='+item.goods_id" v-for="(item,index) in list.data"
						 :key="item.goods_id">
							<view class="left">
								<view class="img">
									<image class="goodsImg" mode="scaleToFill" :src="item.goods_image"></image>
								</view>
							</view>
							<view class="right">
								<view class="cont">
									<!-- 商品名称 -->
									<text class="title f-29 twolist-hidden">{{item.goods_name}}</text>
									<block v-if=" showView ">
										<!-- 商品卖点 -->
										<view class="selling_point onelist-hidden">
											<text>{{ item.selling_point }}</text>
										</view>
										<!-- 商品销量 -->
										<view class="goods_sales dis-flex">
											<text class="onelist-hidden">已售{{ item.goods_sales }}件</text>
										</view>
									</block>
									<!-- 商品价格 -->
									<view class="detail-price onelist-hidden">
										<text class="goods-price f-30 col-m">￥{{item.goods_sku.goods_price}}</text>
										<text class="line-price col-9 f-24" v-if="item.goods_sku.line_price>0">￥{{item.goods_sku.line_price}}</text>
									</view>
								</view>
							</view>
						</navigator>
					</view>
				</view>
				<view v-if="no_more" class=" no-more f-30">亲, 没有更多了
				</view>
			</scroll-view>
		</view>

		<!-- 无数据 -->
		<view v-if="!isLoading && !list.data.length" class=" yoshop-notcont" style="margin-top:130px;">
			<view class="img">
				<image mode="aspectFit" src="/static/img/no_content.png"></image>
			</view>
			<text class="cont">亲, 没有相关内容</text>
		</view>

	</view>
</template>

<script>
	const pageIndex = 'category/list::';
	export default {
		computed: {
			height() {
				return uni.upx2px(this.scrollHeight * 2) + 'px';
			},
			all() {
				return this.sortType == 'all' ? true : 0;
			},
			sales() {
				return this.sortType == 'sales' ? true : 0;
			},
			price() {
				return this.sortType == 'price' ? true : 0;
			}

		},
		data() {
			return {
				scrollHeight: null,

				showView: true, // 列表显示方式
				arrange: "", // 列表显示方式class

				sortType: 'all', // 排序类型
				sortPrice: false, // 价格从低到高

				option: {}, // 当前页面参数
				list: {}, // 商品列表数据

				no_more: false, // 没有更多数据
				isLoading: true, // 是否正在加载中

				page: 1, // 当前页码
			}
		},


		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(option) {
			let _this = this;

			// 设置商品列表高度
			_this.setListHeight();
			// 
			// 记录option
			_this.setData({
				option
			});
			// 设置列表显示方式
			_this.setShowView();

			// 获取商品列表
			_this.getGoodsList();
		},

		methods: {

			/**
			 * 设置默认列表显示方式
			 */
			setShowView() {
				let _this = this;
				_this.setData({
					showView: uni.getStorageSync(pageIndex + 'showView') || this.showView
				});
			},
			/**
			 * 获取商品列表
			 * @param {bool} isPage 是否分页
			 * @param {number} page 指定的页码
			 */
			getGoodsList: function(isPage, page) {
				let _this = this;
				this._get('goods/lists', {
					page: page || 1,
					sortType: this.sortType,
					sortPrice: this.sortPrice ? 1 : 0,
					category_id: this.option.category_id || 0,
					search: this.option.search || '',
				}, function(result) {
					// console.log(result);
					let resList = result.data.list;
					let dataList = _this.list;

					console.log(resList)
					if (isPage == true) {
						_this.setData({
							'list.data': dataList.data.concat(resList.data),
							isLoading: false,
						});
					} else {
						_this.setData({
							list: resList,
							isLoading: false,
						});
					}
				});
			},

			/**
			 * 设置商品列表高度
			 */
			setListHeight: function() {
				let _this = this;
				uni.getSystemInfo({
					success: function(res) {
						_this.setData({
							scrollHeight: res.windowHeight - 90,
						});
					}
				});
			},

			/**
			 * 切换排序方式
			 */
			switchSortType: function(e) {
				let _this = this,
					newSortType = e.currentTarget.dataset.type,
					newSortPrice = newSortType === 'price' ? !this.sortPrice : true;
				this.setData({
					list: {},
					isLoading: true,
					page: 1,
					sortType: newSortType,
					sortPrice: newSortPrice
				});
				// 获取商品列表
				_this.getGoodsList();

			},

			/**
			 * 切换列表显示方式
			 */
			// onChangeShowState: function() {
			// 	let _this = this;
			// 	_this.setData({
			// 		showView: !_this.showView,
			// 		arrange: _this.arrange ? "" : "arrange"
			// 	});
			// },

			onChangeShowState() {
				let _this = this,
					showView = !_this.showView;
				uni.setStorageSync(pageIndex + 'showView', showView);
				_this.setData({
					showView: !_this.showView,
					arrange: _this.arrange ? "" : "arrange"
				});
			},

			/**
			 * 下拉到底加载数据
			 */
			bindDownLoad: function() {
				// 已经是最后一页
				if (this.page >= this.list.last_page) {
					this.setData({
						no_more: true
					});
				}
				// 加载下一页列表
				this.getGoodsList(true, ++this.page);
			},

			/**
			 * 设置分享内容
			 */
			onShareAppMessage: function() {
				// 构建分享参数
				let params = this.urlEncode({
					'referee_id': this.getUserId()
				});
				return {
					title: "全部分类",
					desc: "",
					path: "/pages/category/index?" + params
				};
			},

			/**
			 * 商品搜索
			 */
			triggerSearch: function() {
				let pages = getCurrentPages();
				// 判断来源页面
				if (pages.length > 1 &&
					pages[pages.length - 2].route === '../search/search') {
					uni.navigateBack();
					return;
				}
				// 跳转到商品搜索
				uni.navigateTo({
					url: '../search/search',
				})
			},
		}
	}
</script>

<style>
	/* common.wxss */
	@import url("../../utils/common.scss");

	/* 搜索框 */
	.index-cont-search .iconfont {
		margin: 10upx;
		font-size: 15px;
	}

	.index-cont-search text {
		margin: -1upx;
	}

	.store_nav_cont {
		padding: 20upx 0;
	}

	.store_nav_cont #list-true {
		color: #ff495e;
		font-size: 28upx;
	}

	.store_nav_cont #list-0 {
		color: #333;
		font-size: 28upx;
	}

	.store_nav_cont .price__arrow {
		padding-left: 20upx;
		font-size: 18upx;
		color: #777;
	}

	.store_nav_cont #list-true .price__arrow text.active {
		color: #ff495e;
	}

	.container {
		position: relative;
	}

	.index-cont-search icon {
		left: 0;
		margin-left: 20upx;
	}

	.index-search-box {
		background: #fff;
		padding: 18upx 13upx;
		border-bottom: 1upx solid #eee;
		/* margin-top: 88upx; */
	}

	.index-search {
		border-bottom: 0;
		background: #fff;
		border-radius: 50upx;
		overflow: hidden;
		position: relative;
		font-size: 32upx;
		color: #999;
		box-sizing: border-box;
		height: 64upx;
		line-height: 64upx;
		margin: 0 10upx;
	}

	.list-right {
		width: 60upx;
	}

	.list-right text {
		height: 60upx;
		line-height: 60upx;
		font-size: 40upx;
	}

	.list-header {
		position: fixed;
		top: 1upx;
		left: 0;
		right: 0;
	}

	.no-more {
		text-align: center;
		color: #737373;
		padding: 20upx 0;
	}

	.category-list {
		overflow: hidden;
	}

	.category-list .list {
		box-sizing: border-box;
		width: 50%;
		float: left;
	}

	.category-list .list:nth-child(2n) {
		border-left: 4upx solid #f7f7f7;
		border-bottom: 8upx solid #f7f7f7;
	}

	.category-list .list:nth-child(2n-1) {
		border-right: 4upx solid #f7f7f7;
		border-bottom: 8upx solid #f7f7f7;
	}

	.category-list .list .left,
	.category-list .right {
		width: 100%;
	}

	.category-list .list .left .img image {
		width: 100%;
		height: 375upx;
		display: block;
	}

	.category-list .right .cont {
		padding: 0 12upx;
	}

	.category-list .right .cont .title {
		height: 72upx;
		line-height: 1.3;
	}

	.category-list.arrange .list {
		overflow: hidden;
		padding: 15upx;
		border-bottom: 1upx solid #f7f7f7;
		width: 100%;
	}

	.category-list.arrange .list .left {
		width: 35%;
		float: left;
	}

	.category-list.arrange .list .right {
		width: 65%;
		float: left;
	}

	.category-list.arrange .list .left .img image {
		width: 220upx;
		height: 220upx;
	}

	/* 商品卖点 */

	.selling_point {
		width: 100%;
		font-size: 24rpx;
		line-height: 1.4;
		color: #ff495e;
	}

	.goods_sales {
		color: #999;
		font-size: 24rpx;
	}

	/* 商品价格 */

	.detail-price {
		font-size: 24rpx;
	}

	.detail-price .goods-price {
		margin-right: 8rpx;
		float: left;
	}

	.detail-price .line-price {
		text-decoration: line-through;
		float: left;
	}
</style>
